<template>
	<page>
    <view class="personal-item">
      <view class="item" @click="onEditAvatar">
        <view class="title">
          <text>头像</text>
        </view>
        <view class="content">
          <view class="pic">
            <image :src="info.avatar_pic"></image>
          </view>
          <view class="more">
            <text class="right-arrows"></text>
          </view>
        </view>
      </view>
      <view class="item" @click="onEditNickname">
        <view class="title">
          <text>昵称</text>
        </view>
        <view class="content">
          <view class="desc">
            <text>{{info.nickname}}</text>
          </view>
          <view class="more">
            <text class="right-arrows"></text>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="title">
          <text>ID</text>
        </view>
        <view class="content">
          <view class="desc">
            <text>{{info.pid}}</text>
          </view>
        </view>
      </view>
      <view class="item" @click="onEditSignature">
        <view class="title">
          <text>签名</text>
        </view>
        <view class="content">
          <view class="desc">
            <text>{{info.signature}}</text>
          </view>
          <view class="more">
            <text class="right-arrows"></text>
          </view>
        </view>
      </view>
    </view>
<!--    退出登录-->
    <view class="out-login">
      <view class="btn" @click="onOutLogin">
        <text>退出登录</text>
      </view>
    </view>
	</page>
</template>

<script setup>
import {editAvatar, FileUpload, personalCenter} from "../../api/api";
import {getCurrentInstance, ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {useStore} from "vuex";
import chat from "../../common/chat";

const { proxy } = getCurrentInstance();
const http = process.env.config[process.env.NODE_ENV].baseURL
const info = ref({});
const store = useStore();
onLoad(() =>{

})
onShow(() =>{
  getData();
})
function getData(){
  personalCenter({
  }).then(res =>{
    info.value = res.data;
  })
}

/**
 * 修改头像点击
 */
function onEditAvatar(){
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: async (res) => {
      console.log(JSON.stringify(res.tempFilePaths));
      const url = await upLoadPic(res.tempFilePaths[0]);
      editAvatar({
        avatarUrl: http + url,
      }).then(res =>{
        info.value.avatar_pic = http + url;
      })
    }
  });
}

/**
 * 上传头像
 * @param src
 */
async function upLoadPic(src){
  const data = await FileUpload(src,{
    url: 'avatar'
  })
  return data.data.url;
}

/**
 * 修改昵称点击
 */
function onEditNickname(){
  uni.navigateTo({
    url: '/pages/PersonalInfo/EditInfo/EditInfo?type=0',
    events: {
      userInfo:(data) => {
        console.log(data)
      },
    },
    success:(res)=> {
      // 通过eventChannel向被打开页面传送数据
      setTimeout(() =>{
        res.eventChannel.emit('userInfo', { data: info.value})
      },100)
    }
  })
}
function onEditSignature(){
  uni.navigateTo({
    url: '/pages/PersonalInfo/EditInfo/EditInfo?type=1',
    events: {
      userInfo:(data) => {
        console.log(data)
      },
    },
    success:(res)=> {
      // 通过eventChannel向被打开页面传送数据
      setTimeout(() =>{
        res.eventChannel.emit('userInfo', { data: info.value})
      },100)
    }
  })
}

/**
 * 退出登录点击
 */
function onOutLogin(){
  uni.showModal({
    title: '提示',
    content: '是否退出登录？',
    success: function (res) {
      if (res.confirm) {
        uni.removeStorageSync('token');
        uni.removeStorageSync('user_id');
        uni.removeStorageSync('phone');
        uni.removeStorageSync('userInfo');
        proxy.$global.user_id = '';
        proxy.$global.phone = '';
        proxy.$global.userInfo = {};
        store.commit('setCountMsg',0);
        store.commit('setCountFriendMsg',0);
        store.commit('setChatListData',[]);
        chat.disconnect();
        uni.navigateBack();
      }
    }
  });
}
</script>

<style lang="scss">
  @import "PersonalInfo.scss";
</style>
